<!doctype html>
<html>

    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <link rel="icon" href="./favicon.ico">
        <script src="./js/vue-2.6.1.js" type="text/javascript"></script>
        <script src="./js/jquery-1.11.1.js" type="text/javascript"></script>
        <title>demo</title>
    </head>

    <body>
        <!-- html -->
        <div id="app"></div>

        <script type="text/x-template" id="tpl-app">
            <div style="border: 10px solid red;">
                <div> --- APP ---</div>
                <component-a @mouseenter.native="mouseenterHandle" @gaga="testHandle" :a="A" :b="B" />
            </div>
        </script>

        <script type="text/x-template" id="tpl-component-a">
            <div style="border: 10px solid red;">
                <div>--- 组件 A ---</div>
                <div>{{ '组件 A 的私有属性 count: ' + count}}</div>
                <div>{{ 'a: ' + $attrs.a}}</div>
                <div>{{ 'b: ' + $attrs.b}}</div>
            </div>
        </script>

        <!-- js -->
        <script>
                Vue.component('component-a', {
                    props: ['a'],
                    template: '#tpl-component-a',
                    data() {
                        return {
                            count: 0
                        };
                    },
                    mounted() {
                        console.log('component-a-$attrs', this.$attrs);
                        console.log('component-a-$listeners', this.$listeners);

                        setTimeout(() => {
                            this.$listeners.gaga('info');
                        }, 2000);

                        setTimeout(() => {
                            this.$emit('gaga', 'xxxx');
                        }, 4000);
                    }
                });

                var app = new Vue({ // eslint-disable-line
                    el: '#app',
                    template: '#tpl-app',
                    data: {
                        A: 'A',
                        B: 'B',
                        self: 'app'
                    },
                    methods: {
                        clickHandle() {
                            this.A = 'AAAAA';
                            this.B = 'BBBBB';
                        },
                        testHandle(args) {
                            console.log('gaga', this.self, args);
                        },
                        mouseenterHandle() {
                            console.log('app - mouseenter');
                        }
                    }
                });
        </script>
    </body>

</html>